<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简陋聊天室</title>
    <link rel="stylesheet" href="/static/css/login.css">
    <script src="\static\js\jquery2.1.3.min.js"></script>
    <!--样式来源: https://codepen.io/colorlib/pen/rxddKy -->
</head>
<body>
    <div class="login-page">
        <h1 style="color:white;text-align: center;">简陋聊天室</h1>
        <div class="form">
			<div class="register-form form1" >
				<input id="raccount" type="text" placeholder="账号"/>
				<input id="rnickname" type="text" placeholder="昵称"/>
				<input id="avatar" type="text" placeholder="在线头像地址,不填为随机头像"/>
				<input id="rpass" type="password" placeholder="密码"/>
				<input id="rpass2" type="password" placeholder="确认密码"/>
				<input id="email" type="text" placeholder="邮箱地址"/>
				<button onclick="register()">注册</button>
				<p class="message">已经注册? <a href="#" >点击登录</a></p>
			</div>
			<div class="login-form form1">
				<input id="account" type="text" placeholder="账号"/>
				<input id="pass" type="password" placeholder="密码"/>
				<button onclick="login()">登录</button>
				<p class="message">未注册? <a href="#">创建账号</a></p>
			</div>
        </div>
      </div>
    
    <script>
        $('.message a').click(function(){
            $('.form1').animate({height: "toggle", opacity: "toggle"}, "slow");
        });

        function register(){
			var account=$("#raccount").val();
			var nickname=$("#rnickname").val();
			var avatar=$("#avatar").val();
			var password=$("#rpass").val();
			var pass2=$("#rpass2").val();
			var rpass=$("#pass").val();
			var email=$("#email").val();
			if(password != pass2){
				alert("两次密码不一致");
				return;
			}
          	jQuery.ajax({
                type: "POST",
                url: "/ajax_register",
                data: {
                    account:account,
                    nickname:nickname,
                    avatar:avatar,
                    password:password,
                    email:email,
                },
                dataType: 'json',
                success: function (data) {
                    if(data.code==200){
						window.location.href = "/chat_list";
					}else{
						alert(data.msg);
					}
                }
            });
        }
        function login(){
			var account=$("#account").val();
			var password=$("#pass").val();
          	jQuery.ajax({
                type: "POST",
                url: "/ajax_login",
                data: {
                    account:account,
                    password:password
                },
                dataType: 'json',
                success: function (data) {
                    if(data.code==200){
						window.location.href = "/chat_list";
					}else{
						alert(data.msg);
					}
                }
            });
        }

    </script>
</body>
</html>